<!DOCTYPE HTML>
<html>
<head>
<title>HousePenBox</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="housepenbox.css">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<script src="jquery-1.8.1.min.js"></script>
<script src="housepenbox.min.js"></script>
<script>
$(init);
</script>
</head>
<body id="body">
<div id="viewer" class="panel" align="center">
 <div class="toolbar">
  <div id="edit_button">edit</div>
 </div>
 <canvas id="canvas">oops! [1]</canvas>
 <div id="error_panel" class="messagebar">ERROR</div>
</div>
<div id="editor" class="panel">
 <textarea id="textarea" wrap="off">jump 10 10
width 4
draw 40 80
repeat 10 begin
  draw 40 -80
  draw -10 0
  draw -30 10
  draw -30 -10
  draw -3.8 0
  jump -1.2 -.5
  scale .7
  draw 50 100
end</textarea>
 <div class="toolbar">
  <div id="status"><b>- : -</b></div>
  <div id="help_button">help</div>
  <div id="save_dialog_button">save</div>
  <div id="load_dialog_button">load</div>
  <div id="load_ex_dialog_button">load example</div>
  <div id="play_button">run <b style="color: #700">&#9654;</b></div>
 </div>
</div>
<div id="saver" class="panel" style="text-align:center;">
  <div class="meta_window" style="left:auto;bottom:auto;padding:2px 10px;">
    name:<br/>
    <input type="text" id="save_name"><br/>
    <div id="save_button" class="button">save</div>
    <div id="cancel_save_button" class="meta_cancel"></div>
  </div>
</div>
<div id="loader" class="panel">
  <div class="meta_window">
    <div id="load_list" class="meta_content"></div>
    <div id="cancel_load_button" class="meta_cancel"></div>
  </div>
</div>
<div id="help" class="panel">
  <div class="meta_window">
    <div class="meta_content" style="padding-top:0px;">
<h1>HousePenBox</h1>
<p><small>Version 1.0pre1<br>
&copy; 2012 Alexey Michurin &lt;a.michurin[at]gmail.com&gt;<br>
URL: http://housepenbox.appspot.com/</small></p>
<h2>Language</h2>
<h3>Summary</h3>
<pre>begin EXPR EXPR ... end
call NAME
clear
color EXPR EXPR EXPR
decr NAME
def NAME EXPR
diff EXPR EXPR
draw EXPR EXPR
if EXPR EXPR
ifelse EXPR EXPR EXPR
incr NAME
jump EXPR EXPR
left EXPR
local EXPR
minus EXPR
print EXPR
prod EXPR EXPR
quot EXPR EXPR
repeat EXPR EXPR
right EXPR
scale EXPR
set NAME EXPR
sum EXPR EXPR
width EXPR
</pre>
<h3>Blocks</h3>
<pre>begin
  ...
end</pre>
<h3>Drawing</h3>
<pre>jump dx-expr dy-expr
draw dx-expr dy-expr
clear
color r-expr g-expr b-expr
left expr
right expr
width expr
scale expr
</pre>
<h3>Variables and mathematics</h3>
<pre>set name expr
incr name
decr name

minus expr
sum expr expr
prod expr expr
quot expr expr
</pre>
<h3>Special variables</h3>
<pre>
_xo _yo
_x _y
_a
_r _g _b
_w
_s
_
</pre>
<h3>Context</h3>
<pre>
local expr
</pre>
<h3>Flow control</h3>
<pre>if expr expr
ifelse expr expr expr
repeat expr expr
def sub-name
call sub-name
</pre>
<h2>Hot keys</h2>
<p>Ctrl-Enter</p>
    </div>
    <div id="cancel_help_button" class="meta_cancel"></div>
  </div>
</div>
<div id="examples" class="panel">

<div><h1>Simple drawing / Coordinate system</h1><!-- ---------------------------------------- -->
<code># Tortoise draws in the square field
# with follow geometry
#
#          ^ Y axe
#          |
# (0, 100) +------+ (100, 100)
#          |DRAING|
#          | AREA |
#          |      | X axe
#   (0, 0) +------+-->
#          ^         (0, 100)
#          `- initial point
#
# Lets draw a simple figure

draw  10  10  # go to (10, 10)
draw  70   0  # go to (80, 10)
draw   0  50  # go to (80, 60)
draw -30  30  # go to (50, 90)
draw -30 -30  # go to (20, 60)
</code>
</div>

<div><h1>Simple drawing / Jumping, colors, line width</h1><!-- ---------------------------------------- -->
<code># If you do not want to drow,
# you can jump, but not draw

jump 20 10  # jump to (20, 10)

# Lets change background color

# colors are specified as triplet: red, green, blue
# each component lay in interval from 0 to 100

# Now we set dark gray background

color 10 10 10
clear

# Lets change paint color

color 100 100 100  # We set up white color

# and now lets setup line width

width 2

# draw our picture

draw   60   0   # go to (0.8, 0.1)
draw    0  50   # go to (0.8, 0.6)
color 100 0 0   # set red color
draw  -30  30   # go to (0.5, 0.9)
draw  -30 -30   # go to (0.2, 0.6)
color 100 100 100 # set white color
draw    0 -50   # go to (0.2, 0.1)
</code>
</div>

<div><h1>Variables / Simple</h1><!-- ---------------------------------------- -->
<code># You can use variables instead numbers.
# To set up variable, use set statement:

set a 33          # let a is 33

# Now you can use variable a

color 0 0 0       # set black
clear             # background

color a 100 a     # set color to light green (33, 100, 33)

jump a a # jump to .1 .1
draw a 0 # draw to .2 .1
draw 0 a # draw to .2 .2
</code>
</div>

<div><h1>Variables / Mathematica</h1><!-- ---------------------------------------- -->
<code># You can use manipulate variables.

set a 3           # a = 3
set b sum  a 2    # b = a + 2 = 5
set c prod b 6    # c = b * 6 = 30
set a sum  c a    # a = c + a = 33
                  # i.e. a = 33

# or the same manipulation in one exprassion

set a 3
set a sum prod sum a 2 6 a
# a = (a + 2) * 6 + a
# how to undestand:
# set a (sum (prod (sum a 2) 6) a)

# Now you can use variable a

color 0 0 0       # set black
clear             # background

color a 100 a     # set color to light green (33, 100, 33)

jump a a # jump to .1 .1
draw a 0 # draw to .2 .1
draw 0 a # draw to .2 .2
</code>
</div>

<div><h1>Logo</h1><!-- ---------------------------------------- -->
<code>color 20 20 20
clear
width 4
color 80 80 80
jump 10 10
draw 40 80
repeat 10 begin
  draw 40 -80
  draw -10 0
  draw -30 10
  draw -30 -10
  draw -3.8 0
  jump -1.2 -.5
  scale .7
  draw 50 100
end
</code>
</div>

<div><h1>Nested loops</h1><!-- ---------------------------------------- -->
<code>def s begin
  draw 10 0
  draw 0 10
  draw -10 0
  draw 0 -10
end

width 3
set y 5
repeat 5 begin
  set x 5
  repeat 5 begin
    local begin
      jump x y
      set c quot sum x y 2
      color c c c
      call s
    end
    set x sum x 20
  end
  set y sum y 20
end
</code>
</div>

<div><h1>Loop recursion</h1><!-- ---------------------------------------- -->
<code>def b local if decr level begin
  set a quot aa sum LEVEL minus level
  left prod 4 a # -- HACK
  repeat SPROUT begin
    local begin
      draw 0 1
      scale .4
      call b
    end
    right a
  end
end

jump 50 50
scale 30
width .1
set SPROUT 9
set aa quot 360 SPROUT
set LEVEL 5
set level LEVEL
set ang_f 1
call b
</code>
</div>


<div><h1>First</h1><!-- ---------------------------------------- -->
<code>jump  10  10
draw  40   0
draw   0  40
draw -40   0
draw   0 -40
</code>
</div>

<div><h1>Tree</h1><!-- ---------------------------------------- -->
<code>def X if level begin
  decr level
  draw 0 10
  local begin
    left 20
    call X
  end
  local begin
    right 20
    call X
  end
end

jump 50 10
set level 7
call X
</code>
</div>

<div><h1>Tree slow</h1><!-- ---------------------------------------- -->
<code>def X if level begin
  decr level
  draw 0 6
  local begin
    left 20
    call X
  end
  local begin
    right 20
    call X
  end
end

jump 50 10
set level 10
call X
</code>
</div>

<div><h1>Tail recursion</h1><!-- ---------------------------------------- -->
<code>def F if level begin
  set s prod level 20
  draw 0 s
  draw s 0
  draw 0 minus s
  draw minus s 0
  decr level
  call F
end
jump 10 10
set level 4
call F
</code>
</div>

<div><h1>L-System / Peano-Gosper curve</h1><!-- ---------------------------------------- -->
<code># Peano-Gosper curve
#
# Rule:
#  X -> X+YF++YF-FX--FXFX-YF+
#  Y -> -FX+YFYF++YF+FX--FX-Y
# Axiom:
#  FX
# Angle:
#  60

def F draw 1 0

def X if level begin
  decr level
  call  X
  right 60
  call Y  call F
  right 60  right 60
  call Y  call F
  left  60
  call F  call X
  left  60  left  60
  call F  call X  call F  call X
  left  60
  call Y  call F
  right 60
  incr level
end

def Y if level begin
  decr level
  left  60
  call F call X
  right 60
  call Y  call F  call Y  call F
  right 60  right 60
  call Y  call F
  right 60
  call F  call X
  left  60  left  60
  call F  call X
  left  60
  call Y
  incr level
end

jump 63 95
scale 1.7
width .1
set level 4
call F
call X
</code>
</div>

<div><h1>L-System / tree</h1><!-- ---------------------------------------- -->
<code># L-system tree
# Angle : 16
# Axiom : F
# Rule  : F -> FF-[-F+F+F]+[+F-F-F]

def F
  ifelse level
    begin
      decr level
      call F
      call F
      left 16
      local
      begin
        left  16
        call  F
        right 16
        call  F
        right 16
        call  F
      end
      right 16
      local
      begin
        right 16
        call  F
        left  16
        call  F
        left  16
        call  F
      end
      incr level
    end
    draw 0 1

width   0.12
jump    95 05
scale   2.1
left    35
set     level 4

call  F
</code>
</div>

<div><h1>L-System / Smooth dragon curve as L-system</h1><!-- ---------------------------------------- -->
<code># Smooth dragon curve as L-system

def F draw 0 1

def turn repeat 9 begin
 call F right angle
end

def r begin
  set angle 10
  call turn
end

def l begin
  set angle -10
  call turn
end

def X if level begin
  decr level
  call X call r call Y call r
  incr level
end

def Y if level begin
  decr level
  call l call X call l call Y
  incr level
end

width 3
jump 25 35
scale .36
scale .5
set level 9

call X
</code>
</div>

<div><h1>L-System / Sierpinski triangle</h1><!-- ---------------------------------------- -->
<code># Sierpinski triangle
# A, (A -> B-A-B), (B -> A+B+A)

# A -> B-A-B
def A ifelse level begin
  decr level
  call B
  left 60
  call A
  left 60
  call B
  incr level
end
begin
  color 0 100 100
  draw 0 1
end

# B -> A+B+A
def B ifelse level
begin
  decr level
  call A
  right 60
  call B
  right 60
  call A
  incr level
end
begin
  color 100 100 100
  draw 0 1
end

color 0 0 0 clear
width 0.4
jump 90 15
left 90
scale 1.25
set level 6

call A
</code>
</div>

</div>
</body>
</html>
